<template>
  <div class="home-top">
    <h3>人气推荐</h3>
    <div class="content">
      <van-card v-for="item in goodsList" :key="item.id" :tag="item.tag" :price="item.retail_price"
        :origin-price="item.origin_price" :desc="item.goods_brief" :title="item.name" :thumb="item.list_pic_url">
      </van-card>
    </div>
  </div>
</template>

<script setup>
const goodsList = [{
  retail_price: '299.00',
  name: '鲨鱼玩偶啊呜公仔毛绒玩具儿童',
  goods_brief: '盈利诺,毛绒,呆萌可爱',
  list_pic_url: '/images/top1.jpg',
  tag: 'TOP1'
},
{
  retail_price: '88.00',
  origin_price: '98.00',
  name: '家用女生全身镜卧室试衣壁挂贴墙挂墙立体落地镜',
  goods_brief: '简约现代,一镜两用,摆放随心所欲',
  list_pic_url: '/images/top2.jpg',
  tag: 'TOP2'
},
{
  retail_price: '128.00',
  origin_price: '168.00',
  name: '卧室地毯客厅床边防滑高级感免洗加厚地毯地垫',
  goods_brief: '时尚元素,超柔蕾娜丝,INS风 北欧风',
  list_pic_url: '/images/top3.jpg', tag: 'TOP3'
},
{
  retail_price: '100.00',
  origin_price: '205.00',
  name: '发条玩具可爱毛毛虫婴儿玩具爬行会动跑益智小动物链条',
  goods_brief: '发条毛毛虫,好玩不用电轻轻一扭向前进,智趣辨色边玩边科普',
  list_pic_url: '/images/top4.jpg',
  tag: 'TOP4'
},
{
  retail_price: '120.00',
  origin_price: '99.00',
  name: '喜洋洋与灰太狼零钱包可爱懒羊羊钥匙扣毛绒玩具玩偶包包挂件',
  goods_brief: '小钱包大容量 公交卡口红钥匙都可以装主人快点来把我带回家吧',
  list_pic_url: '/images/top5.jpg',
  tag: 'TOP5'
}
]
</script>

<style lang="less" scoped>
.home-top {
  h3 {
    font-size: 22px;
    line-height: 30px;
    text-align: center;
    margin: 0.5rem 0;
  }

  .content {
    --van-tag-primary-color: #FF8000;
    --van-card-font-size: 16px;
    --van-card-background: #f9f9f9;
    background:
      var(--van-card-background);

    :deep(.van-card) {
      margin-top: 0;

      .van-card title {
        padding: 10px 0 5px;
      }

      .van-card price-currency {
        font-size: var(--van-card-font-size);
      }
    }

    &::after {
      content: '';
      display: block;
      height: 3rem;
    }
  }
}
</style>